<template>
  <div >
    <el-dialog v-if="enable" :visible.sync="enable" title="日志查看" width="90%" :before-close="actionClose">
      <textarea ref="viewer" :value="content" class="content"></textarea>
    </el-dialog>
  </div>
</template>
<script>
export default {
    name : 'DialogLogViewer',
    data() {
        return {
            content : '',
            enable : false,
            stream : null,
        };
    },
    methods : {
        /** */
        async open( filepath ) {
            let server = this.$store.getters.serverCurrent;
            let client = await server.getSshClient();
            
            let $this = this;
            this.stream = await client.exec4Stream(`tail -f ${filepath} & read; kill $!`);
            this.stream.on('data', (data, extended) => {
                $this.content += data;
                $this.$refs.viewer.scrollTop = $this.$refs.viewer.scrollHeight + 50;
            });
            this.stream.on('exit', function(code, signal) {
                $this.enable = false;
            });
            this.enable = true;
        },

        /** 关闭对话框 */
        actionClose() {
            this.stream.write('\n');
        }
    },
}
</script>
<style scoped>
.content {background: #282828;width: 100%;height: 400px;color: #b5b5b5;line-height: 24px;border: 0;outline: none;}
</style>